import React, {useEffect} from 'react';
import {useNavigate,Navigate} from "react-router-dom";

function My(props) {
    // 1- 通过以下方法可以实现对身份的验证
    // const navigate = useNavigate();
    // useEffect(()=>{
    //     if(!localStorage.getItem("token")){
    //         navigate("/login");
    //     }
    // },[])

    // 2-
    // if(!localStorage.getItem("token"))
    //     return <Navigate to={"/login"}></Navigate>

    // 2- 通过以上方法进行验证有两个问题
    // 2-1:代码复用性不好
    // 2-2:效率低
    // 3- 解决方案：自定义拦截器
    const navigate = useNavigate();
    return (
        <div>
            <h3>个人中心</h3>
            <p>欢迎{localStorage.getItem("token")}的到来</p>
            <button onClick={()=>{
                // localStorage.removeItem("token");
                localStorage.clear();
                navigate("/login");
            }}>退出</button>
        </div>
    );
}

export default My;